<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑步</title>
    
</head>

<body>
    <div class="app-running dpflex fdcolumn">
        <ul id="menuContent" class="flex1 running-content dpflex">
            <!-- 跑步 -->
            <li  class="on">
                <!-- 跑步距离 -->
                <div class="running-distance dpflex fdcolumn">
                    <p>目前累计跑步距离</p>
                    <p><span>58.23</span>公里</p>
                </div>
                <!-- 地图区域 -->
                <div class="running-map dpflex fdcolumn">
                    <!-- 地图区域 -->
                    <div class="content flex1" style="height: 380px; position: relative;">
                        <div class="running-button dpflex">
                            <p class="active">户外跑</p>
                            <p>燃脂跑</p>
                            <p>跑步机</p>
                        </div>
                        <!-- 地图容器 -->
                        <div id="mapContainer" class="map-container" style="height: 380px;">
                        <div class="go">GO</div>
                        <!-- 容器中的地图 是动态渲染的 -->
                        <div class="bottom-icon">
                            <p><i class="iconfont icon-set"></i></p>
                            <span>设置目标 ></span>
                            <p><i class="iconfont icon-music"></i></p>
                        </div>
                    </div>
                </div>
                <!-- 跑步路线区域 -->
                <div class="running-area dpflex fdcolumn">
                    <p>跑步路线</p>
                    <p>
                        <span>使用跑步路线,邂逅附近的同行者</span>
                        <i class="iconfont icon-rightreturn"></i>
                    </p>
                </div>
                
            </li>
            <!-- 骑行 -->
            <li>
            <!-- 骑行路线区域 -->
            <div class="running-area dpflex fdcolumn">
                <p>骑行路线</p>
                <p>
                    <span>使用骑行路线,邂逅附近的骑行达人</span>
                    <i class="iconfont icon-rightreturn"></i>
                </p>
            </div>  
            </li>
        </ul>
    </div>

<script
    type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=8b592d376c631f7583d09f567ee95494">
    </script>
</body>
    
</html>